import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { onMounted, onBeforeUnmount, ref } from 'vue'
export const useLeaflet = (mapId: string, url: string, center: [number, number]) => {
  const mapRef = ref() //地图实例
  const bounds = L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
  /* 创建瓦片数据 */
  const osm = L.tileLayer(url, {
    maxNativeZoom: 15,
    maxZoom: 15
  })
  onMounted(() => {
    mapRef.value = L.map(mapId, {
      center,
      zoomControl: true,
      zoom: 13,
      minZoom: 0,
      maxZoom: 15,
      attributionControl: false,
      layers: [osm],
      maxBounds: bounds
    })
  })
  /** 卸载地图 */
  onBeforeUnmount(() => {
    mapRef.value.remove()
  })
  return { mapRef }
}
